<template>
  <div class="right">
    <div class="right_header">
      <div class="title">万号来电</div>
      <div class="title_body">
        <span v-for="(item, index) in callNum" :key="index">{{ item }}</span>
      </div>
      <div class="title">转译完成百分比</div>
      <div class="title_body">
        转译数：<i>{{ zhanYi | num }}</i>
      </div>
      <div class="BarBox" ref="BarBox"></div>
    </div>
    <div class="anHui">
      <div class="title">全省视图</div>
      <div class="mapBox" ref="mapBox"></div>
    </div>
  </div>
</template>

<script>
import JSONanhui from "@/assets/anhui.json";
import request from "@/untils/request1";
export default {
  name: "right",
  data() {
    return {
      callNum: "851627",
      zhanYi: 596139,
      barCharts: null,
      map: null,
      cityData: [
        {
          value: "265",
          name: "合肥市",
          itemStyle: { normal: { areaColor: "#d99694" } },
        },
        {
          value: "563",
          name: "宣城市",
          itemStyle: { normal: { areaColor: "#edd900" } },
        },
        {
          value: "552",
          name: "蚌埠市",
          itemStyle: { normal: { areaColor: "#d99694" } },
        },
        {
          value: "564",
          name: "六安市",
          itemStyle: { normal: { areaColor: "#edd900" } },
        },
        {
          value: "553",
          name: "芜湖市",
          itemStyle: { normal: { areaColor: "#d99694" } },
        },
        {
          value: "554",
          name: "淮南市",
          itemStyle: { normal: { areaColor: "#d99694" } },
        },
        {
          value: "566",
          name: "池州市",
          itemStyle: { normal: { areaColor: "#edd900" } },
        },
        {
          value: "555",
          name: "马鞍山市",
          itemStyle: { normal: { areaColor: "#d99694" } },
        },
        {
          value: "556",
          name: "安庆市",
          itemStyle: { normal: { areaColor: "#d99694" } },
        },
        {
          value: "557",
          name: "宿州市",
          itemStyle: { normal: { areaColor: "#edd900" } },
        },
        {
          value: "558",
          name: "阜阳市",
          itemStyle: { normal: { areaColor: "#0070bc" } },
        },
        {
          value: "560",
          name: "亳州市",
          itemStyle: { normal: { areaColor: "#0070bc" } },
        },
        {
          value: "559",
          name: "黄山市",
          itemStyle: { normal: { areaColor: "#0070bc" } },
        },
        {
          value: "550",
          name: "滁州市",
          itemStyle: { normal: { areaColor: "#0070bc" } },
        },
        {
          value: "561",
          name: "淮北市",
          itemStyle: { normal: { areaColor: "#0070bc" } },
        },
        {
          value: "1562",
          name: "铜陵市",
          itemStyle: { normal: { areaColor: "#0070bc" } },
        },
      ],
      callNumPlus: null,
      zhanYiPlus: null,
      yesterdayCallNum: 851627,
      yesterdayZhanYi: 596139,
    };
  },
  methods: {
    initBar() {
      if (this.barCharts == null) {
        this.barCharts = this.$echarts.init(this.$refs.BarBox);
      }
      this.barCharts.setOption(this.options1);
      window.addEventListener("resize", () => {
        // 第六步，执行echarts自带的resize方法，即可做到让echarts图表自适应
        this.barCharts.resize();
        this.map.resize();
        // 如果有多个echarts，就在这里执行多个echarts实例的resize方法,不过一般要做组件化开发，即一个.vue文件只会放置一个echarts实例
        /*
        this.myChart2.resize();
        this.myChart3.resize();
        ......
        */
      });
    },
    initAnhuiMap() {
      this.$echarts.registerMap("安徽", JSONanhui);
      this.map = this.$echarts.init(this.$refs.mapBox);
      this.map.setOption(this.options2);
    },
    setplus() {
      let nowData = parseInt(this.callNum);
      let nowZhuanYi = this.zhanYi;
      // 外呼数++
      this.callNumPlus = setInterval(() => {
        let temp = parseInt(this.callNum) + Math.round(Math.random() * 10);
        if (temp - nowData > this.yesterdayCallNum) {
          this.callNum = nowData + this.yesterdayCallNum;
          this.callNumPlus = null;
          return;
        }
        this.callNum = temp + "";
      }, 3000);
      // 转译数++
      this.zhanYiPlus = setInterval(() => {
        this.zhanYi += Math.round(Math.random() * 10);
        if (this.zhanYi - nowZhuanYi > this.yesterdayZhanYi) {
          this.zhanYi = nowZhuanYi + this.yesterdayZhanYi;
          this.zhanYiPlus = null;
          return;
        }
      }, 2000);
    },
    // 最上面万号来电的数据数组0是callNum 1是转译数
    getCallNum() {
      request({
        url: `sys/VoiceContent/getlist`,
        type: "get",
      }).then(({ data }) => {
        console.log(data);
        if (data.code === 0) {
          this.callNum = data.data[1].toString();
          this.zhanYi = data.data[0];
        }
      });
    },
    //
    test() {
      request({
        url: `sys/VoiceContent/getText`,
        type: "get",
      }).then(({ data }) => {
        console.log(data);
        if (data.code === 0) {
        }
      });
    },
  },
  mounted() {
    this.initBar();
    this.initAnhuiMap();
    this.setplus();
  },
  computed: {
    options1() {
      let option = {
        grid: {
          // 直角坐标系内绘图网格
          left: "40", //grid 组件离容器左侧的距离,
          //left的值可以是80这样具体像素值，
          //也可以是'80%'这样相对于容器高度的百分比
          top: "0",
          right: "20",
          bottom: "0",
          containLabel: true, //gid区域是否包含坐标轴的刻度标签。为true的时候，
          // left/right/top/bottom/width/height决定的是包括了坐标轴标签在内的
          //所有内容所形成的矩形的位置.常用于【防止标签溢出】的场景
        },
        xAxis: {
          type: "value",
          data: ["Mon"],
          splitLine: { show: false }, //坐标轴在 grid 区域中的分隔线
          axisLabel: { show: false }, //坐标轴刻度标签
          axisTick: { show: false }, //坐标轴刻度
          axisLine: { show: false }, //坐标轴轴线
        },
        yAxis: {
          type: "category",
          axisTick: { show: false },
          axisLine: { show: false },
          axisLabel: {
            show: false,
          },
          data: ["a"],
        },
        series: [
          {
            name: "%",
            type: "bar",
            barWidth: 19,
            data: [`${((this.zhanYi / this.callNum) * 100).toFixed(2)}`],
            label: {
              //图形上的文本标签
              show: true,
              position: "right", //标签的位置
              offset: [0, -20], //标签文字的偏移，此处表示向上偏移40
              formatter: "{c}{a}", //标签内容格式器 {a}-系列名,{b}-数据名,{c}-数据值
              color: "#fff", //标签字体颜色
              fontSize: 20, //标签字号
            },
            itemStyle: {
              //图形样式
              normal: {
                barBorderRadius: 10,
                color: new this.$echarts.graphic.LinearGradient(
                  //前四个参数用于配置渐变色的起止位置，这四个参数依次对应 右下左上 四个方位。也就是从右边开始顺时针方向。
                  //通过修改前4个参数，可以实现不同的渐变方向
                  /*第五个参数则是一个数组，用于配置颜色的渐变过程。
                          每项为一个对象，包含offset和color两个参数
                        */
                  1,
                  0,
                  0,
                  0,
                  [
                    {
                      //代表渐变色从正上方开始
                      offset: 0, //offset范围是0~1，用于表示位置，0是指0%处的颜色
                      color: "rgb(3,174,253)",
                    }, //柱图渐变色
                    {
                      offset: 1, //指100%处的颜色
                      color: "rgb(223,3,147)",
                    },
                  ]
                ),
              },
            },
            zlevel: 1,
          },
          {
            name: "进度条背景",
            type: "bar",
            barGap: "-102%",
            barWidth: 20,
            data: [110],
            color: "#fff",
            itemStyle: {
              normal: {
                barBorderRadius: 10,
                borderColor: "rgb(3, 154, 225)",
                borderWidth: 2,
              },
            },
          },
        ],
      };
      return option;
    },
    options2() {
      let colorData = this.cityData.map((d) => d.itemStyle.normal.areaColor);
      console.log(colorData);
      // let cityData = this.cityData;
      let option = {
        color: colorData,
        geo: {
          map: "安徽",
          roam: false, //不开启缩放和平移
          zoom: 1.23, //视角缩放比例
          label: {
            normal: {
              show: true,
              fontSize: "10",
              color: "rgba(255,255,255,0.8)",
            },
          },
          regions: colorData,
        },
        tooltip: {
          trigger: "item",
          formatter: "{a}<br/>{b}:{c}",
        },
        dataRange: {
          show: false,
          min: 0.5,
          max: 17.1,
          x: "left",
          y: "bottom",
          text: ["高", "低"], // 文本，默认为数值文本
          calculable: true,
          color: ["lightskyblue", "#9F79EE", "lightskyblue"],
          textStyle: { color: "#FFFFFF" },
        },
        series: [
          {
            name: "安徽",
            type: "map",
            mapType: "安徽",
            hoverable: true,
            dataRangeHoverLink: true,
            zoom: 1.2,
            selectedMode: "single", // 同时只能一块区域变色
            label: {
              //显示各地方名称
              normal: {
                show: true,
                textStyle: {
                  color: "#101010",
                  fontSize: 12,
                  // fontWeight:'bold',
                },
                //formatter:function(d){return d.name + '\n' + d.value;}
              },
              emphasis: {
                show: true,
                textStyle: {
                  color: "#101010",
                  fontSize: 12,
                  // fontWeight:'bold'
                },
              },
            },
            itemStyle: {
              normal: {
                borderColor: "rgb(85,155,240)",
                borderWidth: 1,
                shadowColor: "rgb(85,155,240)",
                shadowBlur: 10,
              },
              emphasis: {
                areaColor: "#B9D3EE", //修改区域hover效果
              },
            },
            // data: [
            //   { name: "宣城市", value: 0.8 },
            //   { name: "芜湖市", value: 6.6 },
            //   { name: "蚌埠市", value: 1.7 },
            //   { name: "池州市", value: 1.3 },
            //   { name: "滁州市", value: 1.1 },
            //   { name: "安庆市", value: 1.2 },
            //   { name: "马鞍山市", value: 1.4 },
            //   { name: "淮南市", value: 3.0},
            //   { name: "亳州市", value: 0.5},
            //   { name: "六安市", value: 2.5},
            //   { name: "淮北市", value: 1.0},
            //   { name: "黄山市", value: 1.1},
            //   { name: "宿州市", value: 1.0},
            //   { name: "阜阳市", value: 1.9},
            //   { name: "合肥市", value: 17.1 },
            //   { name: "铜陵市", value: 1.2 },
            // ],
            data: this.cityData,
          },
        ],
      };
      return option;
    },
  },
  watch: {
    // 监听表格
    callNum() {
      this.initBar();
    },
    zhanYi() {
      this.initBar();
    },
  },
  filters: {
    num: (val) => {
      val = "" + val; // 转换成字符串
      let int = val;
      int = int.split("").reverse().join(""); // 翻转整数
      let temp = ""; // 临时变量
      for (let i = 0; i < int.length; i++) {
        temp += int[i];
        if ((i + 1) % 3 === 0 && i !== int.length - 1) {
          temp += ","; // 每隔三个数字拼接一个逗号
        }
      }
      temp = temp.split("").reverse().join(""); // 加完逗号之后翻转
      return temp; // 返回
    },
  },
  created() {
    this.getCallNum();
    this.test()
  },
  beforeDestroy() {
    window.removeEventListener("resize", () => {
      this.barCharts.resize();
      this.map.resize();
    });
  },
};
</script>

<style scoped lang="scss">
.right {
  /* width: 500px; */
  height: 100%;
  // min-width: 500px;
  // max-width: 800px;
  width: 100%;
  border: none !important;
}
.right_header {
  // min-width: 500px;
  // max-width: 800px;
  height: 38%;
  // height: 100%;
  width: 100%;
  background-image: url("@/assets/left1.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: white;
  z-index: 10000;
  padding-top: 1.625rem;
}
.title {
  padding: 0.2rem 0 0.2rem 1.3125rem;
  width: 10rem;
  /* height: 34px; */
  line-height: 1.5rem;
  /* text-align: center; */
  /* background: #ccc; */
  font-size: 1.25rem;
  position: relative;
  margin-left: 2.5625rem;
  background: linear-gradient(
    to right,
    rgba(2, 173, 245, 0.6),
    rgba(2, 173, 245, 0.1)
  );
}
.title::before {
  content: "";
  width: 0.3125rem;
  height: 1.9rem;
  position: absolute;
  top: 0;
  left: 0;
  background: rgb(2, 173, 245);
}
//上访的数字
.title_body {
  display: flex;
  align-items: center;
  padding: 1.5rem 0 1.5rem 3.8rem;
  span {
    margin: 0 0.3rem;
    padding: 0.4rem 0.4rem;
    border: 0.125rem solid rgb(32, 72, 133);
    text-align: center;
    font-family: electronicFont;
    font-size: 1.8rem;
    transition: all 1s;
  }
  i {
    font-size: 1.8rem;
    font-family: electronicFont;
    letter-spacing: 0.3rem;
    color: rgb(69, 208, 252);
  }
}
// 上方的横向柱状图的盒子
.BarBox {
  width: 100%;
  // padding: 1.5rem 0 1.5rem 1.3125rem;
  height: 4rem;
  // height: 300px;
  //   background-color: rgb(197, 57, 57);
}

// 下方的安徽省box
.anHui {
  margin-top: 1.25rem;
  height: 50%;
  width: 100%;
  background-image: url("@/assets/left2.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: white;
  z-index: 10000;
  padding-top: 1.625rem;
}
.mapBox {
  width: 100%;
  height: 90%;
  // background-color: #fff;
}
</style>